<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Coexisting Vue Microfrontends</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="importmap-type" content="systemjs-importmap">
  <script type="systemjs-importmap">
    {
        "imports": {
          "navbar": "http://localhost:8080/app.js",
          "app1": "http://localhost:8081/app.js",
          "app2": "http://localhost:8082/app.js",
          
          "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
          "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
          "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js"
        }
      }
    </script>
  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js"
    as="script" crossorigin="anonymous" />
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" as="script" crossorigin="anonymous" />
  <script src="https://unpkg.com/import-map-overrides@1.7.2/dist/import-map-overrides.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script>
</head>

<body>
  <script>
    (function () {
      Promise.all([System.import('single-spa'), System.import('vue'), System.import('vue-router')]).then(function (
        modules) {
        var singleSpa = modules[0];
        var Vue = modules[1];
        var VueRouter = modules[2];
        Vue.use(VueRouter)

        singleSpa.registerApplication(
          'navbar',
          () => System.import('navbar'),
          location => true
        );
        // singleSpa.registerApplication(
        //   'zlogin',
        //   () => System.import('zlogin'),
        //   location => location.pathname.startsWith('/zlogin')
        // );
        singleSpa.registerApplication(
          'app1',
          () => System.import('app1'),
          location => location.pathname.startsWith('/app1')
        );

        singleSpa.registerApplication(
          'app2',
          () => System.import('app2'),
          location => location.pathname.startsWith('/app2')
        );

        singleSpa.start();
      })
    })()
  </script>
  <!-- See https://github.com/joeldenning/import-map-overrides#user-interface  -->
  <import-map-overrides-full show-when-local-storage="overrides-ui"></import-map-overrides-full>
</body>

</html>